<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.0.2">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="fonts.useso.com/css?family=Lato:300,300italic,400,400italic,700,700italic|Roboto+Slab:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  
  <link rel="stylesheet" href="/lib/animate-css/animate.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.min.css">
  <script src="//cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script>

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"changlujava.gitee.io","root":"/","scheme":"Gemini","version":"8.0.0-rc.5","exturl":true,"sidebar":{"position":"left","width":240,"display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":true,"mediumzoom":false,"lazyload":true,"pangu":true,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"path":"search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}};
  </script>

  <meta name="description" content="认识JavaScript1995年网景公司(凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司)为在静态HTML上有一些动态的效果。 Brendan Eich两周之内创建了js，javascript虽然与java有着相同的部分，但是毫不相关，只是借助其名称推广。">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript">
<meta property="og:url" content="https://changlujava.gitee.io/child/2020/12/14/JavaScript/index.html">
<meta property="og:site_name" content="Changlu&#39;s Blog">
<meta property="og:description" content="认识JavaScript1995年网景公司(凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司)为在静态HTML上有一些动态的效果。 Brendan Eich两周之内创建了js，javascript虽然与java有着相同的部分，但是毫不相关，只是借助其名称推广。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201211152633.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212160248.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212163853.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212164609.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201210230704.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212234953.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212235843.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201213000542.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201213112645.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201213110411.gif">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201213112540.gif">
<meta property="article:published_time" content="2020-12-14T02:15:44.000Z">
<meta property="article:modified_time" content="2020-12-14T02:15:44.000Z">
<meta property="article:author" content="changlu">
<meta property="article:tag" content="JavaScript入门">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201211152633.png">

<link rel="canonical" href="https://changlujava.gitee.io/child/2020/12/14/JavaScript/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>JavaScript | Changlu's Blog</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?8d799723b49054783f9671bcbc95d020";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="Changlu's Blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <!-- fork me on github右上角设置 -->
    <a target="_blank" rel="noopener" href="https://github.com/changlua/changlua.github.io" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <main class="main">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader">
        <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Changlu's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">12</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">7</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">12</span></a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <section class="post-toc-wrap sidebar-panel">
          <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%AE%A4%E8%AF%86JavaScript"><span class="nav-text">认识JavaScript</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8"><span class="nav-text">一、快速入门</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1%E3%80%81%E6%B3%A8%E6%84%8F%E7%82%B9"><span class="nav-text">1、注意点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2%E3%80%81%E5%8F%98%E9%87%8F"><span class="nav-text">2、变量</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%8B%E7%BB%8Dstrict%E6%A8%A1%E5%BC%8F"><span class="nav-text">介绍strict模式</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3%E3%80%81%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B-%E5%BF%AB%E9%80%9F%E4%BB%8B%E7%BB%8D"><span class="nav-text">3、数据类型(快速介绍)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Number"><span class="nav-text">Number</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="nav-text">字符串</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%95%B0%E7%BB%84"><span class="nav-text">数组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1"><span class="nav-text">对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#in%E4%B8%8EhasOwnProperty"><span class="nav-text">in与hasOwnProperty()</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%83%E5%B0%94%E5%80%BC"><span class="nav-text">布尔值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#null%E4%B8%8Eundefined"><span class="nav-text">null与undefined</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4%E3%80%81%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD"><span class="nav-text">4、条件判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5%E3%80%81%E5%BE%AA%E7%8E%AF"><span class="nav-text">5、循环</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6%E3%80%81%E9%9B%86%E5%90%88"><span class="nav-text">6、集合</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Map"><span class="nav-text">Map</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Set"><span class="nav-text">Set</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#iterable%E7%B1%BB%E5%9E%8B"><span class="nav-text">iterable类型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#for-in-%E4%B8%8E-for-of%E5%8C%BA%E5%88%AB"><span class="nav-text">for in 与 for of区别</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#forEach%E6%96%B9%E6%B3%95-iterable%E5%86%85%E7%BD%AE"><span class="nav-text">forEach方法(iterable内置)</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%87%BD%E6%95%B0"><span class="nav-text">二、函数</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1%E3%80%81%E5%87%BD%E6%95%B0%E4%BB%8B%E7%BB%8D"><span class="nav-text">1、函数介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2%E3%80%81%E8%8E%B7%E5%8F%96%E8%B6%85%E8%BF%87%E5%AE%9A%E4%B9%89%E7%9A%84%E5%8F%82%E6%95%B0-%E2%80%A6rest"><span class="nav-text">2、获取超过定义的参数(…rest)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3%E3%80%81%E5%8F%98%E9%87%8F%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F-var%E3%80%81let%E3%80%81conset"><span class="nav-text">3、变量的作用域(var、let、conset)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%A8%E5%B1%80%E4%BD%9C%E7%94%A8%E5%9F%9Fvar"><span class="nav-text">全局作用域var</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%90%E5%8D%87%E5%8F%98%E9%87%8F%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-text">提升变量的作用域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%E4%B8%8E%E5%AF%B9%E8%B1%A1"><span class="nav-text">全局变量与对象</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B1%80%E9%83%A8%E4%BD%9C%E7%94%A8%E5%9F%9Flet"><span class="nav-text">局部作用域let</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E9%87%8Fconst"><span class="nav-text">常量const</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%84%E8%8C%83"><span class="nav-text">规范</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4%E3%80%81%E6%96%B9%E6%B3%95"><span class="nav-text">4、方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95%E5%8F%8Athis%E8%B0%83%E7%94%A8"><span class="nav-text">定义方法及this调用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#apply%E6%96%B9%E6%B3%95"><span class="nav-text">apply方法</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E4%BA%8B%E4%BB%B6"><span class="nav-text">三、事件</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E4%BB%8B%E7%BB%8D"><span class="nav-text">事件介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%9D%99%E6%80%81%E6%B3%A8%E5%86%8C%E4%B8%8E%E5%8A%A8%E6%80%81%E6%B3%A8%E5%86%8C"><span class="nav-text">静态注册与动态注册</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B%E3%80%81-%E5%86%85%E9%83%A8%E5%AF%B9%E8%B1%A1"><span class="nav-text">四、 内部对象</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1%E3%80%81Date"><span class="nav-text">1、Date</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="nav-text">基本使用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3%E3%80%81Ajax"><span class="nav-text">3、Ajax</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B"><span class="nav-text">五、面向对象编程</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1%E3%80%81%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF"><span class="nav-text">1、原型继承</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2%E3%80%81class%E7%BB%A7%E6%89%BF-ES6"><span class="nav-text">2、class继承(ES6)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="nav-text">原型链</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%AD%E3%80%81%E6%93%8D%E4%BD%9CBOM%E5%AF%B9%E8%B1%A1-%E9%87%8D%E7%82%B9"><span class="nav-text">六、操作BOM对象(重点)</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#window%E5%AF%B9%E8%B1%A1-%E9%87%8D%E8%A6%81"><span class="nav-text">window对象(重要)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Naviator%E5%AF%B9%E8%B1%A1"><span class="nav-text">Naviator对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Screen%E5%AF%B9%E8%B1%A1"><span class="nav-text">Screen对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#location%E5%AF%B9%E8%B1%A1-%E9%87%8D%E8%A6%81"><span class="nav-text">location对象(重要)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#document%E5%AF%B9%E8%B1%A1"><span class="nav-text">document对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#history%E5%AF%B9%E8%B1%A1"><span class="nav-text">history对象</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%83%E3%80%81Dom%E4%BA%8B%E4%BB%B6"><span class="nav-text">七、Dom事件</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1%E3%80%81Document%E5%AF%B9%E8%B1%A1%E4%BB%8B%E7%BB%8D"><span class="nav-text">1、Document对象介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2%E3%80%81dom%E7%9A%84%E6%A0%B8%E5%BF%83"><span class="nav-text">2、dom的核心</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9"><span class="nav-text">获取节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0%E8%8A%82%E7%82%B9"><span class="nav-text">更新节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9"><span class="nav-text">删除节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E3%80%81%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9"><span class="nav-text">创建、插入节点</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%AB%E3%80%81%E6%93%8D%E4%BD%9C%E8%A1%A8%E5%8D%95"><span class="nav-text">八、操作表单</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%8F%8A%E4%BF%AE%E6%94%B9%E8%A1%A8%E5%8D%95"><span class="nav-text">获取及修改表单</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%98%BB%E6%AD%A2%E8%A1%A8%E5%8D%95%E7%9A%84%E6%8F%90%E4%BA%A4"><span class="nav-text">阻止表单的提交</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#MD5%E5%AF%86%E7%A0%81%E5%8A%A0%E5%AF%86"><span class="nav-text">MD5密码加密</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%B5%84%E6%96%99%E5%8C%BA"><span class="nav-text">资料区</span></a></li></ol></div>
      </section>
      <!--/noindex-->

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <a href="/about">
    <img class="site-author-image" itemprop="image" alt="changlu"
      src="/images/avator_image.jpg">
  <p class="site-author-name" itemprop="name">changlu</p>
  <div class="site-description" itemprop="description">欢迎来到长路的个人博客！</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">12</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">12</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2NoYW5nbHVh" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;changlua"><i class="fab fa-github fa-fw"></i>GitHub</span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cDovL3dwYS5xcS5jb20vbXNncmQ/dj0zJnVpbj05Mzk5NzQ4ODMmc2l0ZT1xcSZtZW51PXllcw==" title="QQ → http:&#x2F;&#x2F;wpa.qq.com&#x2F;msgrd?v&#x3D;3&amp;uin&#x3D;939974883&amp;site&#x3D;qq&amp;menu&#x3D;yes"><i class="fab fa-qq fa-fw"></i>QQ</span>
      </span>
      <span class="links-of-author-item">
        <a href="/atom.xml" title="RSS → &#x2F;atom.xml"><i class="fas fa-rss fa-fw fa-fw"></i>RSS</a>
      </span>
  </div>


  <div class="links-of-blogroll animated">
    <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <span class="exturl" data-url="aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsOTM5OTc0ODgz" title="https:&#x2F;&#x2F;blog.csdn.net&#x2F;cl939974883">CSDN</span>
        </li>
        <li class="links-of-blogroll-item">
          <span class="exturl" data-url="aHR0cHM6Ly93d3cueXVxdWUuY29tL2NoYW5nbHUteHM1cGc=" title="https:&#x2F;&#x2F;www.yuque.com&#x2F;changlu-xs5pg">语雀</span>
        </li>
        <li class="links-of-blogroll-item">
          <span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vY2hhbmdsdUphdmE=" title="https:&#x2F;&#x2F;gitee.com&#x2F;changluJava">Gitee</span>
        </li>
    </ul>
  </div>

      </section>

      <!--网易云插件-->
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
        src="////music.163.com/outchain/player?type=2&id=757911&auto=1&height=66">
      </iframe>
        <div class="back-to-top animated">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </header>

      
  <div class="reading-progress-bar"></div>

  <span class="exturl github-corner" data-url="aHR0cHM6Ly9naXRodWIuY29tL2NoYW5nbHVhL2NoYW5nbHVhLmdpdGh1Yi5pbw==" title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></span>

<noscript>
  <div id="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


      <div class="main-inner">
        

        <div class="content post posts-expand">
          

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://changlujava.gitee.io/child/2020/12/14/JavaScript/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avator_image.jpg">
      <meta itemprop="name" content="changlu">
      <meta itemprop="description" content="欢迎来到长路的个人博客！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Changlu's Blog">
    </span>

    
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          JavaScript
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-12-14 10:15:44" itemprop="dateCreated datePublished" datetime="2020-12-14T10:15:44+08:00">2020-12-14</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
                </span>
            </span>

          
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2020/12/14/JavaScript/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2020/12/14/JavaScript/" itemprop="commentCount"></span>
    </a>
  </span>
  
  <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>28k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>25 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="认识JavaScript"><a href="#认识JavaScript" class="headerlink" title="认识JavaScript"></a>认识JavaScript</h1><p><strong>1995</strong>年网景公司(凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司)为在静态HTML上有一些动态的效果。</p>
<p>Brendan Eich两周之内创建了js，javascript虽然与java有着相同的部分，但是毫不相关，只是借助其名称推广。</p>
<a id="more"></a>

<p><strong>JavaScript的标准——ECMAScript</strong>，最新版ECMAScript 6标准（简称ES6），大部分浏览器停留在支持es5，就会导致开发环境—线上环境，版本不一致</p>
<hr>
<h1 id="一、快速入门"><a href="#一、快速入门" class="headerlink" title="一、快速入门"></a>一、快速入门</h1><p><strong>三种方式来使用js</strong>：注意script标签需要成对出现</p>
<ul>
<li>① 放置在<code>&lt;script&gt;&lt;/script&gt;</code>标签中，其标签默认为type=”text/javascript”</li>
<li>② <code>&lt;script src=&quot;abc.js&quot;&gt;&lt;/script&gt;</code>直接引入js文件</li>
<li>③ 直接在<strong>标签</strong>中通过事件来编写，如<code>onclick=&quot;alert(&#39;hello&#39;)&quot;</code>   或者  <code>onclick=函数名()</code></li>
</ul>
<p>浏览器的console框中或者js代码中使用(进行日志提醒)：<code>console.log(&quot;hello&quot;)</code></p>
<hr>
<h2 id="1、注意点"><a href="#1、注意点" class="headerlink" title="1、注意点"></a>1、注意点</h2><blockquote>
<p>注意点：js严格区分大小写</p>
</blockquote>
<p>使用<code>;</code>来结束一个句子即可</p>
<p>代码块使用<code>&#123;&#125;</code>包裹</p>
<p>注释为<code>//</code>  或者  <code>/*...*/</code></p>
<hr>
<h2 id="2、变量"><a href="#2、变量" class="headerlink" title="2、变量"></a>2、变量</h2><p><strong>变量说明</strong> ：变量名是大小写英文、数字、<code>$</code>和<code>_</code>的组合，且不能用数字开头,也可以使用中文(尽量不要)</p>
<p>使用<code>var</code>来定义变量，如var a = 100   </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var 表示全局变量</span><br><span class="line">let 表示局部变量</span><br></pre></td></tr></table></figure>





<h3 id="介绍strict模式"><a href="#介绍strict模式" class="headerlink" title="介绍strict模式"></a>介绍strict模式</h3><p>在strict模式前，不设置var来定义变量，该变量为全局</p>
<p>在strict模式下运行的JavaScript代码，强制通过<code>var</code>申明变量，未使用<code>var</code>申明变量就使用的，将导致运行错误。</p>
<p>我们需要使用<code>&#39;use strict&#39;;</code>来开启strict模式</p>
<p><strong>注意</strong>：不支持strict的浏览器会将其当作字符串处理，支持strict模式的将开始该strict模式</p>
<p>运行代码，如果浏览器报错，请修复后再运行。如果浏览器不报错，说明你的浏览器太古老了，需要尽快升级。</p>
<hr>
<h2 id="3、数据类型-快速介绍"><a href="#3、数据类型-快速介绍" class="headerlink" title="3、数据类型(快速介绍)"></a>3、数据类型(快速介绍)</h2><p>使用<code>typeof()</code>来判断数据类型，有Number、字符串、布尔值、null与undefined、数组、对象</p>
<h3 id="Number"><a href="#Number" class="headerlink" title="Number"></a>Number</h3><blockquote>
<p>Number：不区分整数与浮点数</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">123</span>; <span class="comment">// 整数123</span></span><br><span class="line"><span class="number">0.456</span>; <span class="comment">// 浮点数0.456</span></span><br><span class="line"><span class="number">1.2345e3</span>; <span class="comment">// 科学计数法表示1.2345x1000，等同于1234.5</span></span><br><span class="line"><span class="number">-99</span>; <span class="comment">// 负数</span></span><br><span class="line"><span class="literal">NaN</span>; <span class="comment">// NaN表示Not a Number，当无法计算结果时用NaN表示</span></span><br><span class="line"><span class="literal">Infinity</span>; <span class="comment">// Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity</span></span><br></pre></td></tr></table></figure>

<p>运算符分为：+ - * /  %</p>
<p><strong>浮点数问题</strong>：会有精度损失，尽量少使用浮点数来比较</p>
<hr>
<h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><blockquote>
<p>字符串：以单引号’或双引号”括起来的任意文本</p>
</blockquote>
<p>如’abc’,”abc”只是一种表现方式，不是字符串的一部分</p>
<p><strong>①</strong>对于一些符号如‘，/等特殊字符，若是想要显示使用：<code>\</code></p>
<p><strong>②</strong> 连接字符串使用：+，或者使用模板字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> name = <span class="string">&#x27;小明&#x27;</span>;</span><br><span class="line">    <span class="comment">// 注意这个abc使用``包裹起来，再使用$&#123;变量&#125;来进行表示的</span></span><br><span class="line">    <span class="keyword">var</span> abc = <span class="string">`我的名字叫<span class="subst">$&#123;name&#125;</span>`</span>;</span><br><span class="line">    alert(abc)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>③</strong> 其他字符</p>
<p>Unicode字符(\u4e2d)、Ascll(\x41)</p>
<p><strong>④</strong>  操作方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">&#x27;coderCL&#x27;</span>;</span><br><span class="line">a.length;                     <span class="comment">//length：获取长度</span></span><br><span class="line"><span class="keyword">var</span> a1 = a.toUpperCase();   <span class="comment">//toUpperCase()：将字符串变为大写，需要使用变量来接收(不可变原则)</span></span><br><span class="line"><span class="keyword">var</span> a2 = a.toLowerCase();   <span class="comment">//toLowerCase():字符串变小写</span></span><br><span class="line"><span class="keyword">var</span> a3 = a.indexOf(<span class="string">&#x27;CL&#x27;</span>);   <span class="comment">//indexOf()：搜索指定字符串出现位置</span></span><br><span class="line"><span class="keyword">var</span> a4 = s.substring(<span class="number">0</span>, <span class="number">5</span>);    <span class="comment">//substring(a,b)：返回指定索引区间的子串,[a,b)</span></span><br></pre></td></tr></table></figure>





<p><strong>注意</strong>：字符串是不可变的，如按数组下标赋值时无效的</p>
<hr>
<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><blockquote>
<p>数组</p>
</blockquote>
<p><strong>一维数组</strong> ：</p>
<p>方式一：使用[1，2，3]包裹</p>
<p>方式二：new Array(1,2,3)创建，可以空参构造，new array(size)</p>
<p><strong>多维数组</strong>：<code>var arr = [[1, 2, 3], [400, 500, 600], &#39;-&#39;];</code></p>
<p>可以通过下标赋值更改数组的值！！！</p>
<p>越界定义为undefined</p>
<p>长度：<code>arr.length</code>，如果给arr.length赋值那么数组大小会变小，数组元素会丢失</p>
<p><strong>方法介绍</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>, <span class="number">20</span>, <span class="string">&#x27;30&#x27;</span>, <span class="string">&#x27;xyz&#x27;</span>];</span><br><span class="line"><span class="comment">// indexOf()：搜索一个指定的元素的位置</span></span><br><span class="line">arr.indexOf(<span class="number">10</span>); </span><br><span class="line"></span><br><span class="line"><span class="comment">//slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;A&#x27;</span>, <span class="string">&#x27;B&#x27;</span>, <span class="string">&#x27;C&#x27;</span>, <span class="string">&#x27;D&#x27;</span>, <span class="string">&#x27;E&#x27;</span>, <span class="string">&#x27;F&#x27;</span>, <span class="string">&#x27;G&#x27;</span>];</span><br><span class="line">arr.slice(<span class="number">0</span>, <span class="number">3</span>); <span class="comment">// 从索引0开始，到索引3结束，但不包括索引3: [&#x27;A&#x27;, &#x27;B&#x27;, &#x27;C&#x27;]</span></span><br><span class="line">arr.slice(<span class="number">3</span>); <span class="comment">// 从索引3开始到结束: [&#x27;D&#x27;, &#x27;E&#x27;, &#x27;F&#x27;, &#x27;G&#x27;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//push()：末尾添加  pop()：末尾删除</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line">arr.push(<span class="string">&#x27;A&#x27;</span>, <span class="string">&#x27;B&#x27;</span>); <span class="comment">// 返回Array新的长度: 4</span></span><br><span class="line">arr.pop(); <span class="comment">// pop()返回&#x27;B&#x27;</span></span><br><span class="line">arr.pop(); arr.pop(); arr.pop(); <span class="comment">// 连续pop 3次</span></span><br><span class="line">arr.pop(); <span class="comment">// 空数组继续pop不会报错，而是返回undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//unshift()：头部添加   shift()：头部删除</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line">arr.unshift(<span class="string">&#x27;A&#x27;</span>, <span class="string">&#x27;B&#x27;</span>); <span class="comment">// 返回Array新的长度: 4</span></span><br><span class="line">arr.shift(); <span class="comment">// &#x27;A&#x27;</span></span><br><span class="line">arr.shift(); arr.shift(); arr.shift(); <span class="comment">// 连续shift 3次</span></span><br><span class="line">arr.shift(); <span class="comment">// 空数组继续shift不会报错，而是返回undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//sort()：按照默认顺序排序，直接修改当前元素</span></span><br><span class="line">arr.sort();</span><br><span class="line"></span><br><span class="line"><span class="comment">//reverse()：直接反转数组</span></span><br><span class="line">arr.reverse();</span><br><span class="line"></span><br><span class="line"><span class="comment">//concat()：把当前的数组与另一个数组连接，以及任意接收单个元素+数组</span></span><br><span class="line"><span class="keyword">var</span> abc = [<span class="string">&#x27;A&#x27;</span>,<span class="string">&#x27;B&#x27;</span>,<span class="string">&#x27;C&#x27;</span>,<span class="string">&#x27;D&#x27;</span>,<span class="string">&#x27;E&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> aa = abc.concat([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>])</span><br><span class="line">aa.concat(<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>]); <span class="comment">//参数是单个也可以多个</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//join()：指定参数为一个符号，将数组中的根据符号连接起来</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;A&#x27;</span>, <span class="string">&#x27;B&#x27;</span>, <span class="string">&#x27;C&#x27;</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line">arr.join(<span class="string">&#x27;-&#x27;</span>); <span class="comment">// &#x27;A-B-C-1-2-3&#x27;</span></span><br></pre></td></tr></table></figure>



<hr>
<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><blockquote>
<p>对象</p>
</blockquote>
<p><strong>创建方式如下</strong> ：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 方式一：需要使用&#123;&#125;包裹，并用,分开</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    name:<span class="string">&quot;长路&quot;</span>,</span><br><span class="line">    age:<span class="number">10</span>,</span><br><span class="line">    o:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">&quot;a对象中的o函数&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//方式二：使用new Object()来创建对象，直接赋值其属性即可</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">a.name = <span class="string">&quot;长路&quot;</span>;</span><br><span class="line">a.age = <span class="number">18</span>;</span><br><span class="line">a.o = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">&quot;a对象中的o函数&quot;</span>)</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<p>由于js是动态的，所以可以<strong>动态添加与删除对象</strong>的属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用上面创建的来作实例</span></span><br><span class="line">a.profession = <span class="string">&quot;学生&quot;</span>;<span class="comment">//直接动态添加</span></span><br><span class="line"><span class="keyword">delete</span> a.profession; <span class="comment">//动态删除 返回类型为undefined</span></span><br></pre></td></tr></table></figure>



<hr>
<h4 id="in与hasOwnProperty"><a href="#in与hasOwnProperty" class="headerlink" title="in与hasOwnProperty()"></a>in与hasOwnProperty()</h4><p><strong>in操作符的介绍</strong>：in的右边必须是一个对象</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xiaoming = &#123;</span><br><span class="line">    name: <span class="string">&#x27;小明&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line">alert(<span class="string">&#x27;name&#x27;</span> <span class="keyword">in</span> xiaoming)</span><br><span class="line">&#x27;toString&#x27; in xiaoming  # true  因为其继承了toString属性</span><br></pre></td></tr></table></figure>

<p>使用in的<strong>弊端</strong>，使用in来比较时，可能会是xiaoming继承得到的属性</p>
<p><strong>介绍</strong> ：因为<code>toString</code>定义在<code>object</code>对象中，而所有对象最终都会在原型链上指向<code>object</code>，所以<code>xiaoming</code>也拥有<code>toString</code>属性。</p>
<p><strong>判断一个属性是否是一个对象自己拥有的</strong>，而不是继承得到的，可以使用<code>hasOwnProperty()</code>方法。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用上面的xiaoming</span></span><br><span class="line">xiaoming.hasOwnProperty(<span class="string">&#x27;name&#x27;</span>); <span class="comment">// true</span></span><br><span class="line">xiaoming.hasOwnProperty(<span class="string">&#x27;toString&#x27;</span>); <span class="comment">// false</span></span><br></pre></td></tr></table></figure>





<hr>
<h3 id="布尔值"><a href="#布尔值" class="headerlink" title="布尔值"></a>布尔值</h3><blockquote>
<p>布尔值</p>
</blockquote>
<p>分为true、false，使用运算符为&amp;&amp;、||、！</p>
<p>比较运算符：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x3D;   赋值</span><br><span class="line">&#x3D;&#x3D;   等于(类型不一样，值一样，也会判断为true)</span><br><span class="line">&#x3D;&#x3D;&#x3D;   绝对等于(类型一样，值一样，结果为true)</span><br><span class="line">!&#x3D;&#x3D;   和上面相同，首先会判断类型是否相同再比较值</span><br><span class="line">&#x2F;&#x2F;建议使用&#x3D;&#x3D;&#x3D;来比较</span><br></pre></td></tr></table></figure>

<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201211152633.png">  </p>
<p><strong>注意</strong>：JavaScript把<code>null</code>、<code>undefined</code>、<code>0</code>、<code>NaN</code>(通过isNaN()判断)和空字符串<code>&#39;&#39;</code>视为<code>false</code>，其他值一概视为<code>true</code>。</p>
<hr>
<h3 id="null与undefined"><a href="#null与undefined" class="headerlink" title="null与undefined"></a>null与undefined</h3><blockquote>
<p>null与undefined</p>
</blockquote>
<p>null表示为空的一个值，undefined表示未定义</p>
<hr>
<h2 id="4、条件判断"><a href="#4、条件判断" class="headerlink" title="4、条件判断"></a>4、条件判断</h2><p>单条件判断：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age = <span class="number">20</span>;</span><br><span class="line"><span class="keyword">if</span> (age &gt;= <span class="number">18</span>)</span><br><span class="line">    alert(<span class="string">&#x27;adult&#x27;</span>);</span><br><span class="line"><span class="keyword">else</span></span><br><span class="line">    alert(<span class="string">&#x27;teenager&#x27;</span>);</span><br></pre></td></tr></table></figure>



<p>多条件判断：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var age = 3;</span><br><span class="line">if (age &gt;= 18) &#123;</span><br><span class="line">    alert(&#x27;adult&#x27;);</span><br><span class="line">&#125; else if (age &gt;= 6) &#123;</span><br><span class="line">    alert(&#x27;teenager&#x27;);</span><br><span class="line">&#125; else &#123;</span><br><span class="line">    alert(&#x27;kid&#x27;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<hr>
<h2 id="5、循环"><a href="#5、循环" class="headerlink" title="5、循环"></a>5、循环</h2><blockquote>
<p>for循环</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//for循环</span></span><br><span class="line"><span class="keyword">for</span> (i=<span class="number">1</span>; i&lt;=<span class="number">10000</span>; i++) &#123;</span><br><span class="line">    x = x + i;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//for in 循环</span></span><br><span class="line"><span class="comment">//这里o为对象</span></span><br><span class="line"><span class="keyword">var</span> o = &#123;</span><br><span class="line">    name: <span class="string">&#x27;Jack&#x27;</span>,</span><br><span class="line">    age: <span class="number">20</span>,</span><br><span class="line">    city: <span class="string">&#x27;Beijing&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> o) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(key); <span class="comment">// &#x27;name&#x27;, &#x27;age&#x27;, &#x27;city&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里o是数组,打印出索引，并且使用for in对于数组得到的是类型为String而不是Number</span></span><br><span class="line"><span class="keyword">var</span> o = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> o) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(key); <span class="comment">// 0，1，2，3</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<blockquote>
<p> while循环</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var i = 0;</span><br><span class="line">while(i<span class="tag">&lt;<span class="name">10)&#123;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">i</span>++;</span></span><br><span class="line"><span class="tag">    <span class="attr">alert</span>(<span class="attr">i</span>);</span></span><br><span class="line"><span class="tag">&#125;</span></span><br></pre></td></tr></table></figure>



<blockquote>
<p>do while循环</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> n = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">    n = n + <span class="number">1</span>;</span><br><span class="line">&#125; <span class="keyword">while</span> (n &lt; <span class="number">100</span>);</span><br></pre></td></tr></table></figure>



<hr>
<hr>
<h2 id="6、集合"><a href="#6、集合" class="headerlink" title="6、集合"></a>6、集合</h2><h3 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h3><blockquote>
<p>前提描述：js中的{}可以视作其他语言的Map以及Dictionary，也就是一组键值对。单对于js，其键必须是字符串，而不能是Number或其他数据类型，为解决这个问题，就引入了Map</p>
</blockquote>
<p>Map是一组键值对的结构，具有极快的查找速度！</p>
<p>初始化需要一个二维数组或者直接初始化一个空的Map：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//直接初始化一个二维数组</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Map</span>([[<span class="string">&#x27;changlu&#x27;</span>,<span class="number">95</span>],[<span class="string">&#x27;liner&#x27;</span>,<span class="number">100</span>],[<span class="string">&#x27;xiaoming&#x27;</span>,<span class="number">120</span>]]);</span><br><span class="line">alert(a.get(<span class="string">&#x27;changlu&#x27;</span>));    <span class="comment">// get(key)：查找到对应键的值</span></span><br><span class="line">a.set(<span class="string">&#x27;Adam&#x27;</span>, <span class="number">67</span>);            <span class="comment">// set(键，值)：添加新的key-value</span></span><br><span class="line">a.has(<span class="string">&#x27;Adam&#x27;</span>);                 <span class="comment">// has(键)：看是否存在键</span></span><br><span class="line">a.delete(<span class="string">&#x27;Adam&#x27;</span>);            <span class="comment">// delete(&quot;键&quot;)：删除key &#x27;Adam&#x27;</span></span><br></pre></td></tr></table></figure>



<p><strong>注意</strong> ：对于set()添加一组键值对时，若其键本身存在，那么值会进行替换！！！</p>
<hr>
<h3 id="Set"><a href="#Set" class="headerlink" title="Set"></a>Set</h3><blockquote>
<p>与Map相同，也是一组key的集合，但不存储value，并且key不能重复</p>
</blockquote>
<p>两种创建方式：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> s1 = <span class="keyword">new</span> <span class="built_in">Set</span>(); <span class="comment">// 空Set</span></span><br><span class="line"><span class="keyword">var</span> s2 = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]); <span class="comment">// 含1, 2, 3</span></span><br></pre></td></tr></table></figure>



<p>方法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">s1.add(<span class="number">4</span>); <span class="comment">// 添加一个key</span></span><br><span class="line">s1.delete(<span class="number">4</span>); <span class="comment">//删除一个key</span></span><br><span class="line">s2.has(<span class="number">1</span>); <span class="comment">//判断是否存在</span></span><br></pre></td></tr></table></figure>



<hr>
<h3 id="iterable类型"><a href="#iterable类型" class="headerlink" title="iterable类型"></a>iterable类型</h3><blockquote>
<p>对于Array是可以根据下标来进行遍历的，而Set以及Map是不能的。ES6标准为了统一集合，就使用iterable类型，Array、Set、Map都是属于iterable类型。</p>
</blockquote>
<p>遍历集合使用<code>for of</code>来遍历</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//遍历Map</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Map</span>([[<span class="string">&#x27;tom&#x27;</span>,<span class="number">123</span>],[<span class="string">&#x27;jim&#x27;</span>,<span class="number">456</span>]]);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">of</span> a)&#123;</span><br><span class="line">    alert(i); <span class="comment">//tom,123    jim,456</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//遍历Set</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">of</span> a)&#123;</span><br><span class="line">    alert(i);<span class="comment">// 1 2 3 4</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h4 id="for-in-与-for-of区别"><a href="#for-in-与-for-of区别" class="headerlink" title="for in 与 for of区别"></a>for in 与 for of区别</h4><p><code>for in</code>：遍历的是对象的属性名称，可以<strong>遍历数组及对象</strong>，如Array数组实际也是对象，每个元素被视为一个属性，也可以给Array添加一个属性，如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//遍历数组，获取到的是对应的索引值   数组中的为0=&gt;1  1=&gt;2  2=&gt;3  3=&gt;4  name=&gt;changlu</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">arr.name = <span class="string">&quot;changlu&quot;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> arr)&#123;</span><br><span class="line">    alert(i);<span class="comment">//0 1 2 3 name</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//遍历对象</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    name:<span class="string">&quot;长路&quot;</span>,</span><br><span class="line">    age:<span class="number">10</span>,</span><br><span class="line">    o:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">&quot;a对象中的o函数&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> aa <span class="keyword">in</span> a)&#123;</span><br><span class="line">    alert(aa);<span class="comment">// name  age  0</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><code>for of</code>：修复了for in的问题，只循环集合本身的元素，可以<strong>遍历数组、Map、Set</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用for of来遍历数组，直接遍历其值，并且不会遍历除集合以外的值</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">arr.name = <span class="string">&quot;changlu&quot;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">of</span> arr)&#123;</span><br><span class="line">    alert(i);<span class="comment">//1 2 3 4</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//遍历map</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Map</span>([[<span class="string">&#x27;cl&#x27;</span>,<span class="number">145</span>],[<span class="string">&#x27;liner&#x27;</span>,<span class="number">220</span>]]);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> aa <span class="keyword">of</span> a)&#123;</span><br><span class="line">    alert(aa);<span class="comment">// cl,145  liner,220</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//遍历set</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> aa <span class="keyword">of</span> a)&#123;</span><br><span class="line">    alert(aa);<span class="comment">// 1 2 3</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h4 id="forEach方法-iterable内置"><a href="#forEach方法-iterable内置" class="headerlink" title="forEach方法(iterable内置)"></a>forEach方法(iterable内置)</h4><blockquote>
<p> 针对于iterable内置的方法forEach，它接收一个函数，每次迭代就自动回调该函数</p>
</blockquote>
<p>对于回调函数中的参数也不是一定要写三个的！</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">arr.name = <span class="string">&quot;changlu&quot;</span>;</span><br><span class="line"><span class="comment">//使用forEach遍历数组</span></span><br><span class="line"><span class="comment">// element: 指向当前元素的值   index: 指向当前索引   array: 指向Array对象本身</span></span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">element,index,array</span>)</span>&#123;</span><br><span class="line">    alert(element+<span class="string">&#x27;,&#x27;</span>+index);<span class="comment">// 1,0  2,1  3,2  4,3</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//使用forEach遍历Map</span></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Map</span>([[<span class="string">&#x27;changlu&#x27;</span>,<span class="number">15</span>],[<span class="string">&#x27;liner&#x27;</span>,<span class="number">20</span>]]);</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value,key,set</span>)</span>&#123;</span><br><span class="line">    alert(key+<span class="string">&#x27;,&#x27;</span>+value);<span class="comment">//    changlu,15  liner,20</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//使用forEach遍历Set，对于Set没有索引，所以其value与key都是指向自己本身</span></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>]);</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value,key,set</span>)</span>&#123;</span><br><span class="line">    alert(key+<span class="string">&#x27;,&#x27;</span>+value); <span class="comment">// 1,1  2,2  3,3  4,4  5,5</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<hr>
<h1 id="二、函数"><a href="#二、函数" class="headerlink" title="二、函数"></a>二、函数</h1><h2 id="1、函数介绍"><a href="#1、函数介绍" class="headerlink" title="1、函数介绍"></a>1、函数介绍</h2><p><strong>两种创建方式</strong> ：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：直接定义函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//方式二：通过给变量赋值</span></span><br><span class="line"><span class="keyword">var</span> fun2 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>说明点：</p>
<ol>
<li>函数中有一个隐藏参数arguments，其参数包含所有传入的参数，也可以自己添加对应的参数名称</li>
<li>对于未传参的获取到的值未undefined</li>
</ol>
<p><strong>如何抛出异常呢？</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> abs = <span class="function"><span class="keyword">function</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//判断输入的是否为数字</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> x !== <span class="string">&#x27;number&#x27;</span>)&#123;</span><br><span class="line">        <span class="comment">//使用throw来抛出异常</span></span><br><span class="line">        <span class="keyword">throw</span> <span class="string">&#x27;Not a number&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<hr>
<h2 id="2、获取超过定义的参数-…rest"><a href="#2、获取超过定义的参数-…rest" class="headerlink" title="2、获取超过定义的参数(…rest)"></a>2、获取超过定义的参数(…rest)</h2><blockquote>
<p>问题描述：对于一个函数我们可以传入任意的参数，那站在使用者调用者的角度，我们如何来获取到额外未定义的参数呢？</p>
</blockquote>
<p>原来：通过判断来获取多余的参数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fun = <span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//通过判断参数大于参数的个数</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">arguments</span>.length&gt;<span class="number">2</span>)&#123;</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">2</span>;i&lt;<span class="built_in">arguments</span>.length;i++)&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<p>现在：引入<strong>ES6的新特性</strong>，使用…rest来接收额外的参数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fun = <span class="function"><span class="keyword">function</span>(<span class="params">a,b,...rest</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(rest);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p><strong>说明</strong> ：这里的rest其实只是一个参数名称，更改其他的也可以！！！</p>
<hr>
<h2 id="3、变量的作用域-var、let、conset"><a href="#3、变量的作用域-var、let、conset" class="headerlink" title="3、变量的作用域(var、let、conset)"></a>3、变量的作用域(var、let、conset)</h2><h3 id="全局作用域var"><a href="#全局作用域var" class="headerlink" title="全局作用域var"></a>全局作用域var</h3><blockquote>
<p>var关键字有个特性，在js预处理阶段会进行作用提升，即无论声明在使用语句的前还是后，都会提升到最前面。</p>
</blockquote>
<p>在js中，<code>var</code>定义变量实际上是有作用域的，可以作为全局变量。</p>
<p>① 若是在函数内中设置var变量，那么函数体外是不能访问到的！(若想实现，需要研究<strong>闭包</strong>)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line">        x += <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    x += <span class="number">1</span>;<span class="comment">//Uncaught ReferenceError: x is not defined</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<p>② 若是相互独立的两个函数内使用了相同的变量名，是不相关的！</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line">        x += <span class="number">1</span>;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;这是fun()...&quot;</span>+x);<span class="comment">// 2</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fun1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;这是fun1()...&quot;</span>+x);<span class="comment">// 1</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    x += <span class="number">1</span>;<span class="comment">//  Uncaught ReferenceError: x is not defined</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<p>③ 函数中包含函数，里面的函数能够使用外部的，外部的不能引用里面的！</p>
<p>④ 在函数1中包含一个函数2，函数1与函数2中有相同的变量，那在函数1最后获取这个变量，其值依旧是函数1中的！</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line">    x += <span class="number">1</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;这是fun()...&quot;</span>+x);</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fun1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;这是fun1()...&quot;</span>+x);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//这里获取到的值为fun()里定义的，不访问fun1()中的值</span></span><br><span class="line">    <span class="built_in">console</span>.log(x);<span class="comment">// 2</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<hr>
<h4 id="提升变量的作用域"><a href="#提升变量的作用域" class="headerlink" title="提升变量的作用域"></a>提升变量的作用域</h4><p>看这个例子:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> x = <span class="string">&#x27;a&#x27;</span>+y;</span><br><span class="line">    <span class="built_in">console</span>.log(x);<span class="comment">// aunderfined</span></span><br><span class="line">    <span class="keyword">var</span> y;<span class="comment">//这里一定要定义，否则报y is not defined</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>结果为：aunderfined</p>
<p><strong>说明</strong> ：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值。</p>
<p>这个在js建立之初就存在的特性，养成规范：<strong>所有的变量都定义在函数的头部</strong>，不要乱放，便于代码维护，如下：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x=<span class="number">1</span>,y=x+<span class="number">1</span>,z,d,count;   <span class="comment">//x=1 y=2 z=undefine   d=undefine   count=undefine</span></span><br></pre></td></tr></table></figure>



<hr>
<h4 id="全局变量与对象"><a href="#全局变量与对象" class="headerlink" title="全局变量与对象"></a>全局变量与对象</h4><p>全局变量<code>var</code>，全局对象<code>window</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> a=<span class="number">1</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(a);</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">window</span>.a);<span class="comment">// 默认所有的变量都会自动绑定在window</span></span><br><span class="line">    &#125;</span><br><span class="line">    foo();</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<p><strong>全局对象的使用</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> a=<span class="number">1</span>;</span><br><span class="line">    alert(<span class="number">123</span>);</span><br><span class="line">    <span class="built_in">window</span>.alert(<span class="number">123</span>);<span class="comment">//通过window全局变量来调用函数alert()</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> new_alert = <span class="built_in">window</span>.alert;<span class="comment">//获取到该alert函数变量</span></span><br><span class="line"></span><br><span class="line">    <span class="built_in">window</span>.alert = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="comment">//直接改写alert()方法</span></span><br><span class="line">    &#125;;</span><br><span class="line">    alert(<span class="number">456</span>);<span class="comment">//此时我们调用的是改写的，alert()已经失效了</span></span><br><span class="line"></span><br><span class="line">    <span class="built_in">window</span>.alert = new_alert;<span class="comment">//重新赋值回来之前的</span></span><br><span class="line">    alert(<span class="string">&quot;我又回来了！&quot;</span>);<span class="comment">//即可重新调用</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>说明</strong> ：js实际上只有一个全局作用域，任何变量(函数也可以视为变量)，范围内找到，就会向外查找；若全局作用域都没有找到，那么报错<code>ReferenceError</code>。</p>
<hr>
<h3 id="局部作用域let"><a href="#局部作用域let" class="headerlink" title="局部作用域let"></a>局部作用域let</h3><p><strong>问题引入</strong> ：</p>
<p>​    定义变量在for循环中，我们依旧能够在循环前与循环外访问到该变量，原因是其var是全局变量，会自动将其申明到顶部，若是我们想要外部访问不到对应的变量，如何解决？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="built_in">console</span>.log(i);<span class="comment">//undefined</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">100</span>; i++) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i);<span class="comment">//0-99</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;外部访问i:&quot;</span>+i);<span class="comment">//外部访问100</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<blockquote>
<p>ES6引入let关键字，用来解决局部作用域冲突问题</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">100</span>; i++) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i);<span class="comment">//0-99</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;外部访问i:&quot;</span>+i);<span class="comment">//Uncaught ReferenceError</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>使用<code>let</code>，外部访问时就会出现未发现引用错误！！！</p>
<p><strong>建议</strong>：对于局部变量建议使用<code>let</code>关键字定义</p>
<hr>
<h3 id="常量const"><a href="#常量const" class="headerlink" title="常量const"></a>常量const</h3><blockquote>
<p>ES6引入的新关键字，用来将变量作为常量，具有只读的属性</p>
</blockquote>
<p><strong>引入的来源</strong>：</p>
<p>ES6之前，都是通过口头来约定只要将变量名设置为大写即是常量，如下面例子能够看到可以对其进行更改值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> PI = <span class="number">3.14</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(PI);<span class="comment">//3.14</span></span><br><span class="line">    PI = <span class="number">3.1415926</span>;<span class="comment">//能够更改其值</span></span><br><span class="line">    <span class="built_in">console</span>.log(PI);<span class="comment">//3.1415926</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<p>ES6以后，通过使用关键字<code>const</code>来进行常量约束，若是更改值就会报错</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> PI = <span class="number">3.14</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(PI);</span><br><span class="line">    PI = <span class="number">3.1415926</span>;<span class="comment">//exer.html:9 Uncaught TypeError: Assignment to constant variable</span></span><br><span class="line">    <span class="built_in">console</span>.log(PI);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<hr>
<h3 id="规范"><a href="#规范" class="headerlink" title="规范"></a>规范</h3><p><strong>①</strong> 由于我们在js中定义的全局变量都会绑定到window上，如果引用不同的js文件，那么其中就可能包含了相同的全局变量，就会产生冲突，那么我们如何解决这个冲突问题呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//通过自己定义一个对象，其中来进行规范</span></span><br><span class="line"><span class="keyword">var</span> cl = &#123;&#125;;</span><br><span class="line">cl.name = <span class="string">&#x27;changlu&#x27;</span>;</span><br><span class="line">cl.add = <span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a-b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>将自己的代码放置到自己定义的命名空间中，降低全局命名冲突的问题！！！</p>
<p><strong>②</strong> 定义变量，尽量全部事先定义到开头。 </p>
<p><strong>③</strong> ES6后，建议使用<code>let</code>来取代var，let是局部变量，不会进行作用提升。</p>
<p><strong>④</strong> ES6后，建议使用<code>const</code>来定义常量，进行约束。</p>
<hr>
<h2 id="4、方法"><a href="#4、方法" class="headerlink" title="4、方法"></a>4、方法</h2><h3 id="定义方法及this调用"><a href="#定义方法及this调用" class="headerlink" title="定义方法及this调用"></a>定义方法及this调用</h3><blockquote>
<p>定义方法</p>
</blockquote>
<p>方法就是将函数放在对象的里面，对象只有两个东西：属性与方法</p>
<p>这里我们直接将函数嵌套至对象中，让age获取其方法，注意其中的<strong>this指的是person里的birth</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> person = &#123;</span><br><span class="line">        name: <span class="string">&quot;changlu&quot;</span>,</span><br><span class="line">        birth: <span class="number">2018</span>,</span><br><span class="line">        <span class="comment">//获取岁数</span></span><br><span class="line">        age: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">var</span> newage = (<span class="keyword">new</span> <span class="built_in">Date</span>).getFullYear();</span><br><span class="line">            <span class="keyword">return</span> newage - <span class="built_in">this</span>.birth;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(person.name);<span class="comment">//changlu</span></span><br><span class="line">    <span class="built_in">console</span>.log(person.age());<span class="comment">//2</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<p>我们将该使用this的方法放在外部，对象中引用方法和直接调用方法看看调用情况：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">getAge</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> newage = (<span class="keyword">new</span> <span class="built_in">Date</span>).getFullYear();</span><br><span class="line">        <span class="keyword">return</span> newage - <span class="built_in">this</span>.birth;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> person = &#123;</span><br><span class="line">        name: <span class="string">&quot;changlu&quot;</span>,</span><br><span class="line">        birth: <span class="number">2018</span>,</span><br><span class="line">        <span class="comment">//通过引用的方式</span></span><br><span class="line">        age: getAge</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(person.age());<span class="comment">//2</span></span><br><span class="line">    <span class="comment">//这里函数中调用的this指的是window，window.birth=》undefined  2020-undefined=NaN</span></span><br><span class="line">    <span class="built_in">console</span>(getAge());<span class="comment">//NaN</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>直接调用的方法输出结构为NaN,原因是<strong>外部调用this使用的是window</strong> ，及window.birth不存在则是未定义，最后结果为NaN。</p>
<p><strong>出现问题</strong>：可以看到该this是无法进行指向的，那么我们该如何控制this的指向呢？</p>
<hr>
<h3 id="apply方法"><a href="#apply方法" class="headerlink" title="apply方法"></a>apply方法</h3><p>通过apply方法能够控制this的指向</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">getAge</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> newage = (<span class="keyword">new</span> <span class="built_in">Date</span>).getFullYear();</span><br><span class="line">        <span class="keyword">return</span> newage - <span class="built_in">this</span>.birth;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> person = &#123;</span><br><span class="line">        name: <span class="string">&quot;changlu&quot;</span>,</span><br><span class="line">        birth: <span class="number">2018</span>,</span><br><span class="line">        age: getAge</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> animal = &#123;</span><br><span class="line">        name: <span class="string">&quot;snake&quot;</span>,</span><br><span class="line">        birth: <span class="number">2005</span>,</span><br><span class="line">        age: getAge</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    getAge.apply(person,[]);<span class="comment">//2</span></span><br><span class="line">    getAge.apply(animal,[]);<span class="comment">//15</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>通过调用指定方法的一个默认方法apply()，第一个参数指定控制该方法的对象，第二个则为方法的参数(数组表示)。</p>
<hr>
<h1 id="三、事件"><a href="#三、事件" class="headerlink" title="三、事件"></a>三、事件</h1><h2 id="事件介绍"><a href="#事件介绍" class="headerlink" title="事件介绍"></a>事件介绍</h2><p><strong>对于js中的事件有</strong>：</p>
<ul>
<li><code>onload</code>：加载完成事件 ，用于页面js代码初始化操作</li>
<li><code>onclick</code>：单击事件，用于按钮的点击响应操作</li>
<li><code>onblur</code>：失去焦点事件，用于输入框失去焦点来验证输入内容是否合法</li>
<li><code>onchange</code>：内容发生改变事件，用于下拉列表和输入内容发生改变的操作</li>
<li><code>onsubmit</code>：表单提交事件，用于验证表单项是否合法</li>
</ul>
<p><strong>对于表单提交有误，停止提交</strong>？给form标签绑定onsubmit事件，返回false即可停止提交</p>
<p>对于监控选择框改变状态？给select标签绑定onchange事件</p>
<hr>
<h2 id="静态注册与动态注册"><a href="#静态注册与动态注册" class="headerlink" title="静态注册与动态注册"></a>静态注册与动态注册</h2><p><strong>静态注册</strong> ：直接写在body标签后或在标签中调用函数及定义函数</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">//1、直接写在body后的情况</span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">onload</span>=<span class="string">&quot;alert(&#x27;静态注册方式一&#x27;)&quot;</span>&gt;</span>   <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">//2、在标签中调用函数或直接写函数如onclick=&quot;alert(&#x27;静态注册方式二&#x27;)&quot;</span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="keyword">function</span> <span class="title">fun1</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            alert(<span class="string">&quot;静态注册方式二&quot;</span>)</span></span><br><span class="line">        &#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;fun1()&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p><strong>动态注册</strong>：window.onload是加载完页面就执行的，接着通过getElementById来定位按钮动态注册事件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">    &lt;head&gt;</span><br><span class="line">        &lt;meta charset=<span class="string">&quot;utf-8&quot;</span>&gt;</span><br><span class="line">        &lt;title&gt;&lt;/title&gt;</span><br><span class="line">        &lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line">            <span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">var</span> button = <span class="built_in">document</span>.getElementById(<span class="string">&quot;button1&quot;</span>);</span><br><span class="line">                button.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                    alert(<span class="string">&quot;动态注册点击事件&quot;</span>);</span><br><span class="line">                &#125;;</span><br><span class="line">            &#125;</span><br><span class="line">         &lt;/script&gt;</span><br><span class="line">    &lt;/head&gt;</span><br><span class="line">    &lt;body&gt;</span><br><span class="line">        &lt;input type=<span class="string">&quot;button&quot;</span> id=<span class="string">&quot;button1&quot;</span> &gt;</span><br><span class="line">    &lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>



<hr>
<h1 id="四、-内部对象"><a href="#四、-内部对象" class="headerlink" title="四、 内部对象"></a>四、 内部对象</h1><blockquote>
<p>标准对象</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span>(<span class="literal">NaN</span>)</span><br><span class="line"><span class="string">&quot;number&quot;</span></span><br><span class="line"><span class="keyword">typeof</span>(<span class="literal">true</span>)</span><br><span class="line"><span class="string">&quot;boolean&quot;</span></span><br><span class="line"><span class="keyword">typeof</span>([])</span><br><span class="line"><span class="string">&quot;object&quot;</span></span><br><span class="line"><span class="keyword">typeof</span>(<span class="number">123</span>)</span><br><span class="line"><span class="string">&quot;number&quot;</span></span><br><span class="line"><span class="keyword">typeof</span> &#123;&#125;</span><br><span class="line"><span class="string">&quot;object&quot;</span></span><br><span class="line"><span class="keyword">typeof</span>(<span class="string">&#x27;123&#x27;</span>)</span><br><span class="line"><span class="string">&quot;string&quot;</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="built_in">Math</span>.abs</span><br><span class="line"><span class="string">&quot;function&quot;</span></span><br></pre></td></tr></table></figure>



<h2 id="1、Date"><a href="#1、Date" class="headerlink" title="1、Date"></a>1、Date</h2><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><p>方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">    now.getFullYear();<span class="comment">//年  2020</span></span><br><span class="line">    now.getMonth();<span class="comment">//月 0-11表示   11</span></span><br><span class="line">    now.getDate();<span class="comment">//日   12</span></span><br><span class="line">    now.getDay();<span class="comment">//星期几</span></span><br><span class="line">    now.getHours();<span class="comment">//时</span></span><br><span class="line">    now.getMinutes();<span class="comment">//分</span></span><br><span class="line">    now.getSeconds();<span class="comment">//秒</span></span><br><span class="line">    now.getTime();<span class="comment">//1607755752253  时间戳 全世界统一 1970。1.1 0:00:00 毫秒数</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">1607755752253</span>));<span class="comment">//Date Sat Dec 12 2020 14:49:12 GMT+0800 (中国标准时间)</span></span><br><span class="line">    now.toLocaleString();<span class="comment">//&quot;2020/12/12 下午2:49:12&quot;</span></span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<p>转换</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">1607755752253</span>));<span class="comment">//Date Sat Dec 12 2020 14:49:12 GMT+0800 (中国标准时间)</span></span><br><span class="line">now.toLocaleString();<span class="comment">//&quot;2020/12/12 下午2:49:12&quot;</span></span><br><span class="line">now.toGMTString();<span class="comment">//&quot;Sat, 12 Dec 2020 06:49:12 GMT&quot;</span></span><br></pre></td></tr></table></figure>



<hr>
<p>##2、JSON</p>
<blockquote>
<p>JSON是什么</p>
</blockquote>
<p>早期，所有的数据传输习惯使用XML文件！</p>
<ul>
<li>JSON(JavaScript Object Notation，JS简谱)是一种轻量级的数据交换格式</li>
<li>简洁和清晰的层次结构使得JSON成为理想的数据交换语言</li>
<li>易于人阅读和编写，同时也易于及其解析和成功，并有效的提升网络传输效率</li>
</ul>
<p>在javascript中一切皆为对象，任何js支持的类型都可以用JSON来表示，如number,string…</p>
<p>格式如下：</p>
<ul>
<li>对象：{}</li>
<li>数组：[]</li>
<li>所有的键值对都是使用key:value表示</li>
</ul>
<blockquote>
<p>JSON与JS对象的相互转换</p>
</blockquote>
<p><code>JSON.stringify()</code>：传入对象，转为JSON格式的字符串</p>
<p><code>JSON.parse()</code>：传入JSON格式的字符串，转为对象      注意这里如果传入{}需要加引号</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> person = &#123;</span><br><span class="line">        name: <span class="string">&#x27;changlu&#x27;</span>,</span><br><span class="line">        age: <span class="number">15</span>,</span><br><span class="line">        sex: <span class="string">&#x27;男&#x27;</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//使用JSON.stringify()将对象转为JSON格式字符串</span></span><br><span class="line">    <span class="keyword">var</span> jsonStr = <span class="built_in">JSON</span>.stringify(person);</span><br><span class="line">    <span class="comment">//&#123;&quot;name&quot;:&quot;changlu&quot;,&quot;age&quot;:15,&quot;sex&quot;:&quot;男&quot;&#125;</span></span><br><span class="line">    <span class="built_in">console</span>.log(jsonStr);</span><br><span class="line">    <span class="comment">//使用JSON.parse()来将JSON格式的字符串转为对象</span></span><br><span class="line">    <span class="keyword">var</span> per = <span class="built_in">JSON</span>.parse(<span class="string">&#x27;&#123;&quot;name&quot;:&quot;changlu&quot;,&quot;age&quot;:15,&quot;sex&quot;:&quot;男&quot;&#125;&#x27;</span>);</span><br><span class="line">    <span class="comment">//&#123;name: &quot;changlu&quot;, age: 15, sex: &quot;男&quot;&#125;</span></span><br><span class="line">    <span class="built_in">console</span>.log(per);</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>注意</strong>：上面使用JSON.parse()时，需要将对应{}外加上’’作为字符串传入才可以转换。</p>
<p><strong>仔细比对以下对象及JSON差别</strong>：</p>
<ul>
<li>json的key值是字符串，对象的: 号后面规范有一个空格，其余几乎无任何差别</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="attr">name</span>: <span class="string">&quot;changlu&quot;</span>, <span class="attr">age</span>: <span class="number">15</span>, <span class="attr">sex</span>: <span class="string">&quot;男&quot;</span>&#125;   <span class="comment">//对象</span></span><br><span class="line">&#123;<span class="string">&quot;name&quot;</span>:<span class="string">&quot;changlu&quot;</span>,<span class="string">&quot;age&quot;</span>:<span class="number">15</span>,<span class="string">&quot;sex&quot;</span>:<span class="string">&quot;男&quot;</span>&#125;  <span class="comment">// JSON字符串</span></span><br></pre></td></tr></table></figure>



<hr>
<h2 id="3、Ajax"><a href="#3、Ajax" class="headerlink" title="3、Ajax"></a>3、Ajax</h2><ul>
<li>原生的js写法，xhr异步请求</li>
<li>jquery封装好的方法  $(“#name”).ajax</li>
<li>axios请求</li>
</ul>
<hr>
<h1 id="五、面向对象编程"><a href="#五、面向对象编程" class="headerlink" title="五、面向对象编程"></a>五、面向对象编程</h1><h2 id="1、原型继承"><a href="#1、原型继承" class="headerlink" title="1、原型继承"></a>1、原型继承</h2><blockquote>
<p>原型继承的使用</p>
</blockquote>
<p>类就是对象的模板，对象就是类的实例</p>
<p><strong>①</strong> 原型继承的使用(__ protp__来继承)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">// 第一种方式：通过&#123;&#125;这样的方式来作为对象</span></span><br><span class="line">    <span class="keyword">var</span> student = &#123;</span><br><span class="line">        name: <span class="string">&#x27;studentA&#x27;</span>,</span><br><span class="line">        age: <span class="number">15</span>,</span><br><span class="line">        run: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="built_in">this</span>.name + <span class="string">&#x27;running....&#x27;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> xiaoming = &#123;</span><br><span class="line">        name: <span class="string">&#x27;xiaoming&#x27;</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//继承的原型 进行指向</span></span><br><span class="line">    xiaoming.__proto__ = student;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>使用<code>__proto__</code>来进行指向继承的对象，我们可以调用student的属性及方法</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212160248.png">  </p>
<p><strong>②</strong> 原型创建一个类，如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">//方式二：之前学习是函数，不过也能作为一个类</span></span><br><span class="line">    <span class="comment">//创建一个类的原型 第一个字母大写</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">Student</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//prototype即是属性，又是对象,这里是添加函数。</span></span><br><span class="line">    Student.prototype.hello = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">&#x27;hello&#x27;</span>);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//创建类的实例</span></span><br><span class="line">    <span class="keyword">var</span> stu = <span class="keyword">new</span> Student(<span class="string">&quot;xiaoming&quot;</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(stu.name);</span><br><span class="line">    stu.hello();<span class="comment">//hello</span></span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>





<hr>
<h2 id="2、class继承-ES6"><a href="#2、class继承-ES6" class="headerlink" title="2、class继承(ES6)"></a>2、class继承(ES6)</h2><blockquote>
<p>ES6,引入新的关键字class</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">// 使用class来创建类</span></span><br><span class="line">    <span class="class"><span class="keyword">class</span> <span class="title">Person</span></span>&#123;</span><br><span class="line">        <span class="comment">//构造器</span></span><br><span class="line">        <span class="keyword">constructor</span>(name) &#123;</span><br><span class="line">            <span class="built_in">this</span>.name = name;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        hello()&#123;</span><br><span class="line">                alert(<span class="string">&quot;hello&quot;</span>);</span><br><span class="line">            &#125;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//使用extends继承</span></span><br><span class="line">    <span class="class"><span class="keyword">class</span> <span class="title">Student</span> <span class="keyword">extends</span> <span class="title">Person</span></span>&#123;</span><br><span class="line">        <span class="keyword">constructor</span>(name,age) &#123;<span class="comment">//构造器</span></span><br><span class="line">            <span class="built_in">super</span>(name);</span><br><span class="line">            <span class="built_in">this</span>.age = age;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    getShenfen()&#123;</span><br><span class="line">        alert(<span class="string">&quot;我是一名学生&quot;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>我们可以看到其中类的定义与继承几乎与java相差不大了</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212163853.png">  </p>
<hr>
<h2 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h2><blockquote>
<p>当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的<code>__proto__</code>隐式原型上查找，即它的构造函数的<code>prototype</code>，如果还没有找到就会再在构造函数的<code>prototype</code>的<code>__proto__</code>中查找，这样一层一层向上查找就会形成一个链式结构，我们称为<code>原型链</code>。</p>
</blockquote>
<p>即__ proto__</p>
<p>参考文章： <span class="exturl" data-url="aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9lcm1pbmduL2FydGljbGUvZGV0YWlscy84MDc0NTExNw==">【原型和原型链】什么是原型和原型链<i class="fa fa-external-link-alt"></i></span></p>
<p>能够不断顺延下去，原型链是一个环形的链。</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212164609.png">  </p>
<hr>
<h1 id="六、操作BOM对象-重点"><a href="#六、操作BOM对象-重点" class="headerlink" title="六、操作BOM对象(重点)"></a>六、操作BOM对象(重点)</h1><blockquote>
<p>js诞生是为了能够在浏览器中运行</p>
</blockquote>
<p><strong>BOM</strong> (Browser Object Model)： 浏览器对象模型</p>
<p>内核介绍：</p>
<ul>
<li>IE 6-11</li>
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
</ul>
<p>第三方浏览器：</p>
<ul>
<li>qq浏览器</li>
<li>360浏览器</li>
</ul>
<hr>
<h2 id="window对象-重要"><a href="#window对象-重要" class="headerlink" title="window对象(重要)"></a>window对象(重要)</h2><blockquote>
<p>表示浏览器的窗口，所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。</p>
</blockquote>
<p>例如之后所有举的document、Navigator、screen、location…..</p>
<p><strong>窗口尺寸</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//窗口内的高度宽度</span></span><br><span class="line"><span class="built_in">window</span>.innerHeight   <span class="comment">//171</span></span><br><span class="line"><span class="built_in">window</span>.innerWidth    <span class="comment">//1536</span></span><br><span class="line"><span class="comment">//返回一个窗口的外部高度，包括所有界面元素</span></span><br><span class="line"><span class="built_in">window</span>.outerHeight   <span class="comment">//824</span></span><br><span class="line"><span class="built_in">window</span>.outerWidth    <span class="comment">//1536</span></span><br></pre></td></tr></table></figure>

<p>可以调整浏览器的来进行查看尺寸(动态变化)</p>
<p><strong>其他方法</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.open()   <span class="comment">//打开新窗口</span></span><br><span class="line"><span class="built_in">window</span>.close()  <span class="comment">//关闭当前窗口</span></span><br></pre></td></tr></table></figure>



<hr>
<h2 id="Naviator对象"><a href="#Naviator对象" class="headerlink" title="Naviator对象"></a>Naviator对象</h2><blockquote>
<p>属于window这个全局变量，封装了浏览器的信息</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">navigator.appName   <span class="comment">//&quot;Netscape&quot;     返回浏览器的应用程序名称</span></span><br><span class="line">navigator.appVersion <span class="comment">//&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36&quot;   返回有关浏览器的版本信息</span></span><br><span class="line">navigator.userAgent  <span class="comment">//&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36&quot;  由浏览器发送到服务器的用户代理报头</span></span><br><span class="line">navigator.platform   <span class="comment">//win32         浏览器平台（操作系统）</span></span><br><span class="line">navigator.onLine     <span class="comment">//true          浏览器是否在线</span></span><br></pre></td></tr></table></figure>

<p>大多数时候，我们不会使用<code>Naviator</code>,因为这会被认为修改，不建议使用这些属性来进行编写代码！！！</p>
<hr>
<h2 id="Screen对象"><a href="#Screen对象" class="headerlink" title="Screen对象"></a>Screen对象</h2><p>代表屏幕尺寸</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">screen.width    <span class="comment">//以像素计的访问者屏幕宽度</span></span><br><span class="line">screen.height   <span class="comment">//以像素计的访问者屏幕高度</span></span><br></pre></td></tr></table></figure>



<hr>
<h2 id="location对象-重要"><a href="#location对象-重要" class="headerlink" title="location对象(重要)"></a>location对象(重要)</h2><p>表示当前页面的url信息</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">location.host      <span class="comment">//&quot;www.bilibili.com&quot;</span></span><br><span class="line">location.href      <span class="comment">//地址</span></span><br><span class="line">location.protocol  <span class="comment">//返回使用的 web 协议（http: 或 https:）</span></span><br><span class="line">location.assign(<span class="string">&quot;https://baidu.com&quot;</span>)  <span class="comment">//加载新文档,跳转到指定路径网页</span></span><br><span class="line">location.reload()  <span class="comment">//相当于刷新，重新加载</span></span><br></pre></td></tr></table></figure>



<hr>
<h2 id="document对象"><a href="#document对象" class="headerlink" title="document对象"></a>document对象</h2><p>document表示当前的页面，如HTML DOM文档树</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.title      <span class="comment">//获取网页的标题</span></span><br><span class="line"><span class="built_in">document</span>.title=<span class="string">&quot;&quot;</span>   <span class="comment">//设置网页的标题</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取具体的文档树 例句一个</span></span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//获取cookie</span></span><br><span class="line"><span class="built_in">document</span>.cookie</span><br></pre></td></tr></table></figure>

<p>对于服务端可以设置cookie:httpOnly</p>
<hr>
<h2 id="history对象"><a href="#history对象" class="headerlink" title="history对象"></a>history对象</h2><p>代表浏览器的历史记录</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">history.back()  <span class="comment">//浏览器后退</span></span><br><span class="line">history.forward()  <span class="comment">//浏览器前进</span></span><br></pre></td></tr></table></figure>





<hr>
<h1 id="七、Dom事件"><a href="#七、Dom事件" class="headerlink" title="七、Dom事件"></a>七、Dom事件</h1><h2 id="1、Document对象介绍"><a href="#1、Document对象介绍" class="headerlink" title="1、Document对象介绍"></a>1、Document对象介绍</h2><p><strong>Dom</strong>(Document Object Model)：文档对象模型</p>
<p>就是将文档中的标签、属性，文本转化为对象来管理，document管理了所有的HTML文档内容，是一种树结构，包含层级管理，将所有标签对象化，并能够访问所有的标签对象。</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201210230704.png">  </p>
<hr>
<h2 id="2、dom的核心"><a href="#2、dom的核心" class="headerlink" title="2、dom的核心"></a>2、dom的核心</h2><p>浏览器的网页就是一个DOM树型结构！！！一般都是为四个操作</p>
<ul>
<li>更新：更新Dom节点</li>
<li>遍历：得到Dom节点</li>
<li>删除：删除Dom节点</li>
<li>添加：添加一个新的节点</li>
</ul>
<p>想要进行这几个操作，首先需要<strong>获取到dom节点</strong></p>
<hr>
<h3 id="获取节点"><a href="#获取节点" class="headerlink" title="获取节点"></a>获取节点</h3><p>主要是三个方法(通过id、class、标签来获取)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;father&quot;</span>&gt;</span><br><span class="line">        &lt;h1&gt;我是标题<span class="number">1</span>&lt;/h1&gt;</span><br><span class="line">        &lt;span id=<span class="string">&quot;span1&quot;</span>&gt;span&lt;/span&gt;</span><br><span class="line">        &lt;h2 <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;hh&quot;</span>&gt;标题<span class="number">2</span>&lt;/h2&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/body&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> father = <span class="built_in">document</span>.getElementById(<span class="string">&quot;father&quot;</span>);<span class="comment">//获取到div的节点树</span></span><br><span class="line">    <span class="comment">//获取到其子节点</span></span><br><span class="line">    <span class="built_in">console</span>.log(father.children);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>这里是js的原生获取节点代码，之后使用jquery</p>
<ul>
<li><code>document.getElementsByTagName(&#39;div&#39;)</code>    根据标签来获取数组节点 返回类型为<strong>数组</strong></li>
<li><code>document.getElementsByClassName(&#39;hh&#39;)</code>   通过class来获取  返回也可以是<strong>数组</strong></li>
<li><code>document.getElementById(&quot;span1&quot;)</code>      根据id来获取唯一的一个节点</li>
</ul>
<hr>
<h3 id="更新节点"><a href="#更新节点" class="headerlink" title="更新节点"></a>更新节点</h3><blockquote>
<p>需要获取到对应节点后来进行修改</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;div1&quot;</span>&gt;</span><br><span class="line">     &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">//获取到节点来进行修改节点内容操作</span></span><br><span class="line">    <span class="keyword">var</span> div1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;div1&quot;</span>);</span><br><span class="line">    <span class="comment">//操作文本</span></span><br><span class="line">    div1.innerText = <span class="string">&quot;changlu&amp;liner&quot;</span>;  <span class="comment">//插入文本</span></span><br><span class="line">    div1.innerHTML = <span class="string">&quot;&lt;strong&gt;changlu&amp;liner&lt;/strong&gt;&quot;</span>;  <span class="comment">//插入html代码</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//修改样式</span></span><br><span class="line">    div1.style.color = <span class="string">&#x27;red&#x27;</span>;         <span class="comment">//添加颜色</span></span><br><span class="line">    div1.style.padding = <span class="string">&#x27;5px&#x27;</span>;      <span class="comment">//添加内边距</span></span><br><span class="line">    div1.style.fontSize = <span class="string">&#x27;20px&#x27;</span>;     <span class="comment">//添加字体大小</span></span><br><span class="line">    div1.style.textIndent = <span class="string">&#x27;2em&#x27;</span>;   <span class="comment">//首行缩进</span></span><br><span class="line">    div1.style.height = <span class="string">&#x27;200px&#x27;</span>;</span><br><span class="line">    div1.style.width = <span class="string">&#x27;200px&#x27;</span>;</span><br><span class="line">    div1.style.border = <span class="string">&quot;black solid 2px&quot;</span>;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>注意</strong>：修改样式需要使用’’引起来，并且对应的属性采用驼峰命名</p>
<hr>
<h3 id="删除节点"><a href="#删除节点" class="headerlink" title="删除节点"></a>删除节点</h3><p><strong>主要方法总结</strong>：</p>
<ul>
<li><code>remove()</code>   删除调用者及其以下子标签</li>
<li><code>removeChild(span1)</code>  删除指定标签下的子标签</li>
</ul>
<p>示例：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">   &lt;div id=<span class="string">&quot;father&quot;</span>&gt;</span><br><span class="line">       &lt;h1&gt;标题一&lt;/h1&gt;</span><br><span class="line">       &lt;span id=&quot;span1&quot;&gt;span标签&lt;/span&gt;</span><br><span class="line">       &lt;input type=<span class="string">&quot;text&quot;</span>&gt;</span><br><span class="line">   &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br></pre></td></tr></table></figure>



<p><strong>通过下列方式来删除节点</strong>：</p>
<p>① 我们想删除指定一个节点</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">//找到父节点直接删除该节点即以下内容</span></span><br><span class="line">    <span class="keyword">var</span> father = <span class="built_in">document</span>.getElementById(<span class="string">&quot;father&quot;</span>);</span><br><span class="line">    father.remove();<span class="comment">//直接删除该节点下所有节点</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<p>② 通过子节点找到父节点再删除自己</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> span1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;span1&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> father1 = span1.parentElement;<span class="comment">//获取到父节点div</span></span><br><span class="line">    father1.removeChild(span1);<span class="comment">//父节点来删除对应子节点</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<p>③ 通过获取父节点，再依次父节点的孩子节点下标来删除</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> father = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;father&#x27;</span>);</span><br><span class="line">    <span class="comment">//注意，每删除一个节点其数组下标总数都会减少</span></span><br><span class="line">    father.removeChild(father.children[<span class="number">0</span>]);</span><br><span class="line">    father.removeChild(father.children[<span class="number">0</span>]);</span><br><span class="line">    father.removeChild(father.children[<span class="number">0</span>]);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<hr>
<h3 id="创建、插入节点"><a href="#创建、插入节点" class="headerlink" title="创建、插入节点"></a>创建、插入节点</h3><p>列举几个方法：</p>
<ul>
<li><code>document.appendChild(获取到的元素)</code>  添加一个元素到指定标签的子元素最后</li>
<li><code>document.createElement(&#39;标签&#39;)</code>    创建一个指定标签的对象(此时没有添加)</li>
<li><code>setAttribute(&#39;key&#39;,&#39;value&#39;)</code>    给获取到的元素设置属性</li>
<li><code>主添加父标签.insertBefore(待添加，主添加)</code>    将一个标签插入到指定标签前(还需要有父元素进行配合)</li>
</ul>
<p>**案例介绍(三个)**：</p>
<p><strong>①</strong> 使用<code>appendChild()</code>将一个标签插入到指定标签子元素的最后面</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;h1 id=<span class="string">&quot;hh&quot;</span>&gt;标题一&lt;/h1&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;father&quot;</span>&gt;</span><br><span class="line">        &lt;span id=<span class="string">&quot;span1&quot;</span>&gt;span标签&lt;/span&gt;</span><br><span class="line">        &lt;input type=<span class="string">&quot;text&quot;</span>&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">//将h1标签添加到div标签下</span></span><br><span class="line">    <span class="keyword">var</span> hh = <span class="built_in">document</span>.getElementById(<span class="string">&quot;hh&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> father = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;father&#x27;</span>);<span class="comment">//获取div元素</span></span><br><span class="line">    father.appendChild(hh);<span class="comment">//添加到div元素的最后</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212234953.png">  </p>
<p><strong>②</strong> 创建一个节点并设置属性插入到标签中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;father&quot;</span>&gt;</span><br><span class="line">        &lt;span id=<span class="string">&quot;span1&quot;</span>&gt;span标签&lt;/span&gt;</span><br><span class="line">        &lt;input type=<span class="string">&quot;text&quot;</span>&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">//使用createElement(&#x27;标签名&#x27;)  创建指定标签</span></span><br><span class="line">    <span class="keyword">var</span> span = <span class="built_in">document</span>.createElement(<span class="string">&#x27;span&#x27;</span>);</span><br><span class="line">    span.innerText = <span class="string">&quot;我是新添加的span标签&quot;</span>;</span><br><span class="line">    span.style.color = <span class="string">&#x27;red&#x27;</span>;<span class="comment">//设置值的方式一</span></span><br><span class="line">    span.setAttribute(<span class="string">&#x27;fontsize&#x27;</span>,<span class="string">&#x27;10px&#x27;</span>);<span class="comment">//也可以使用setAttribute()来设置属性</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">var</span> father = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;father&#x27;</span>);</span><br><span class="line">    father.appendChild(span);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>添加属性有两种方式，创建标签使用<code>createElement()</code></p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201212235843.png">  </p>
<p><strong>③</strong> 将一个元素插入到指定元素的前面(insetBefore())</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;div1&quot;</span> style=<span class="string">&quot;color: red;&quot;</span>&gt;</span><br><span class="line">        我是div1</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;div id=<span class="string">&quot;father&quot;</span>&gt;</span><br><span class="line">        &lt;span id=<span class="string">&quot;span1&quot;</span>&gt;span标签&lt;/span&gt;</span><br><span class="line">        &lt;input type=<span class="string">&quot;text&quot;</span>&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> div1 = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;div1&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> input = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&#x27;input&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> father = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;father&#x27;</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//将div1元素插入到father标签中的input标签前面</span></span><br><span class="line">    father.insertBefore(div1,input[<span class="number">0</span>]);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>注意</strong>：使用<code>操作对象.insertBefore(参数1，参数2)</code> 需要使用到三个对象，操控者为要添加元素的父标签，第一个参数为新添加的标签，第二个参数为即将给自己前面添加的标签</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201213000542.png">  </p>
<hr>
<h1 id="八、操作表单"><a href="#八、操作表单" class="headerlink" title="八、操作表单"></a>八、操作表单</h1><h2 id="获取及修改表单"><a href="#获取及修改表单" class="headerlink" title="获取及修改表单"></a>获取及修改表单</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;form action=<span class="string">&quot;#&quot;</span> method=<span class="string">&quot;post&quot;</span>&gt;</span><br><span class="line">        用户名：&lt;input type=<span class="string">&quot;text&quot;</span> id=<span class="string">&quot;username&quot;</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span></span><br><span class="line"><span class="xml">        性别：</span></span><br><span class="line">        &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;男&quot; id=&quot;boy&quot;&gt;男</span><br><span class="line">        &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;女&quot; id=&quot;girl&quot;&gt;女</span><br><span class="line">    &lt;/form&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="xml">    </span></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    //获取输入框的值</span><br><span class="line">    var input = document.getElementById(&#x27;username&#x27;);</span><br><span class="line">    console.log(input.value);//获取输入框的值</span><br><span class="line">    input.value = &quot;changlu&quot;;//更改输入框的值</span><br><span class="line">    </span><br><span class="line">    //获取单选框的是否选中</span><br><span class="line">    var boy = document.getElementById(&quot;boy&quot;);</span><br><span class="line">    var girl = document.getElementById(&quot;girl&quot;);</span><br><span class="line">    //获取但单选框是否被选中获取</span><br><span class="line">    console.log(boy.checked);</span><br><span class="line">    console.log(girl.checked);</span><br><span class="line">    boy.checked = true;</span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>


<hr>
<h2 id="阻止表单的提交"><a href="#阻止表单的提交" class="headerlink" title="阻止表单的提交"></a>阻止表单的提交</h2><p>我们阻止表单的提交需要给input标签且type为submit或者form标签的onsubmit事件使用<code>return false</code>即可阻止！！！</p>
<p><strong>三种方式如下</strong> ：</p>
<blockquote>
<p> 方式一：在input标签中使用onclick调用函数</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://baidu.com&quot;</span> <span class="attr">method</span>=<span class="string">&quot;post&quot;</span>&gt;</span></span><br><span class="line">        用户名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;username&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        密码：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;return onsbm()&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">onsbm</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意点</strong> ：<code>onlick=&quot;return onsbm()&quot;</code>    这里尽管函数中有return false，但是回传到””中仅仅只有一个false，所以还要添加上return  才能够阻止提交。</p>
<blockquote>
<p> 方式二：input标签，获取到该节点，绑定单击事件</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://baidu.com&quot;</span> <span class="attr">method</span>=<span class="string">&quot;post&quot;</span>&gt;</span></span><br><span class="line">        用户名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;username&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        密码：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">id</span>=<span class="string">&quot;input1&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">    </span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="comment">//通过绑定单击事件来进行阻止</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> input = <span class="built_in">document</span>.getElementById(<span class="string">&quot;input1&quot;</span>);</span></span><br><span class="line"><span class="javascript">    input.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意</strong>：这里是获取到节点之后绑定单击事件，所以这里return false能够直接生效</p>
<p><strong>方式三</strong>：绑定form中的onsubmit事件，同样与上面相同这里就写一种</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://baidu.com&quot;</span> <span class="attr">method</span>=<span class="string">&quot;post&quot;</span> <span class="attr">onsubmit</span>=<span class="string">&quot;return onsbm()&quot;</span>&gt;</span></span><br><span class="line">        用户名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;username&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        密码：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">onsbm</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>通过绑定form标签的onsubmit同样也能阻止</p>
<hr>
<h2 id="MD5密码加密"><a href="#MD5密码加密" class="headerlink" title="MD5密码加密"></a>MD5密码加密</h2><p>首先我们需要使用cdn的md5的js文件(获取路径)：<span class="exturl" data-url="aHR0cHM6Ly93d3cuYm9vdGNkbi5jbi9ibHVlaW1wLW1kNS8=">https://www.bootcdn.cn/blueimp-md5/<i class="fa fa-external-link-alt"></i></span></p>
<p>若是想看使用的方法(点击上面链接里的Giuhub仓库查看)：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2JsdWVpbXAvSmF2YVNjcmlwdC1NRDU=">https://github.com/blueimp/JavaScript-MD5<i class="fa fa-external-link-alt"></i></span></p>
<p>看github的前缀去掉就能到仓库了！！！</p>
<blockquote>
<p>方案一：直接给密码输入栏中内容加密</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;!--  onsubmit=<span class="string">&quot;return onsbm()&quot;</span> --&gt;</span><br><span class="line">    &lt;form action=<span class="string">&quot;#&quot;</span> method=<span class="string">&quot;post&quot;</span>&gt;</span><br><span class="line">        用户名：&lt;input type=<span class="string">&quot;text&quot;</span> id=<span class="string">&quot;username&quot;</span> name=<span class="string">&quot;username&quot;</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span></span><br><span class="line">        密码：&lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot;&gt;&lt;br&gt;</span><br><span class="line">        &lt;input type=&quot;submit&quot; onclick=&quot;return onsbm()&quot;&gt;</span><br><span class="line">    &lt;/form&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 引入md5.js的cdn标签 --&gt;</span><br><span class="line">&lt;script src=&quot;https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    function onsbm()&#123;</span><br><span class="line">        var password = document.getElementById(&#x27;password&#x27;);</span><br><span class="line">        </span><br><span class="line">        //使用md5()来进行加密！</span><br><span class="line">        password.value = md5(password.value);</span><br><span class="line">        return true;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>通过抓包能够看到用户名密码可以看到成功加密了</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201213112645.png">    </p>
<p>不过注意这种形式的话可以看到点击提交时输入框内容发生了改变，给用户感觉不太好</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201213110411.gif">  </p>
<blockquote>
<p> 方案二：使用hidden隐藏域来解决，最优化</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;#&quot;</span> <span class="attr">method</span>=<span class="string">&quot;post&quot;</span>&gt;</span></span><br><span class="line">        用户名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;username&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 注意这里的密码框没有设置name，表单提交时不会提交它 --&gt;</span></span><br><span class="line">        密码：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">id</span>=<span class="string">&quot;input_password&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 通过隐藏域来作为真正的密码框，并存储加密后的密码 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;hidden&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span> <span class="attr">id</span>=<span class="string">&quot;password&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;return onsbm()&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 引入md5.js的cdn标签 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">onsbm</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//获取到真实输入密码框以及隐藏域的dom节点</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> input_password = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;input_password&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> password = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;password&#x27;</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">        <span class="comment">//使用md5()来进行加密放置到隐藏域中提交！</span></span></span><br><span class="line">        password.value = md5(input_password.value);</span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="literal">true</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>通过隐藏域的话我们就可以解决上面出现输入框一下变成很多位的情况了！！</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201213112540.gif">  </p>
<hr>
<h1 id="资料区"><a href="#资料区" class="headerlink" title="资料区"></a>资料区</h1><ul>
<li>[1]. <span class="exturl" data-url="aHR0cHM6Ly93d3cubGlhb3h1ZWZlbmcuY29tL3dpa2kvMTAyMjkxMDgyMTE0OTMxMi8xMDIzMDIwNzQ1MzU3ODg4">廖雪峰的js教程<i class="fa fa-external-link-alt"></i></span></li>
<li>[2]. <span class="exturl" data-url="aHR0cHM6Ly93d3cuYmlsaWJpbGkuY29tL3ZpZGVvL0JWMUpKNDExNzdkaT9wPTE="> 【狂神说Java】JavaScript最新教程通俗易懂<i class="fa fa-external-link-alt"></i></span></li>
</ul>

    </div>

    
    
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>changlu
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://changlujava.gitee.io/child/2020/12/14/JavaScript/" title="JavaScript">https://changlujava.gitee.io/child/2020/12/14/JavaScript/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC8="><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/images/wechat.jpg">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">WeChat</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/JavaScript%E5%85%A5%E9%97%A8/" rel="tag"><i class="fa fa-tag"></i> JavaScript入门</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/12/12/CSS3/" rel="prev" title="CSS3">
      <i class="fa fa-chevron-left"></i> CSS3
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/12/30/%E5%9B%9E%E9%A1%BE2020%E5%B9%B4%E6%80%BB%E7%BB%93/" rel="next" title="回顾2020年总结">
      回顾2020年总结 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



        </div>
        
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">changlu</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">108k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">1:38</span>
</div>
  <!--
  <div class="powered-by">由 <span class="exturl theme-link" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & <span class="exturl theme-link" data-url="aHR0cHM6Ly90aGVtZS1uZXh0LmpzLm9yZw==">NexT.Gemini</span> 强力驱动
  </div>
  <br/>
  -->
  <div class="powered-by">
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv">
      本站访客数<span id="busuanzi_value_site_uv"></span>人次
    </span>
  </div>


        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/next-boot.js"></script>


  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>




  
<script src="/js/local-search.js"></script>













  

  

  
  <script src="//cdn.jsdelivr.net/npm/quicklink@2/dist/quicklink.umd.js"></script>
  <script>
      window.addEventListener('load', () => {
      quicklink.listen({
        timeout : 3000,
        priority: true,
        ignores : [uri => uri.includes('#'),uri => uri === 'https://changlujava.gitee.io/child/2020/12/14/JavaScript/',]
      });
      });
  </script>


<script>
NexT.utils.loadComments('#valine-comments', () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js', () => {
    new Valine(Object.assign({
      el  : '#valine-comments',
      path: location.pathname,
    }, {"enable":true,"appId":"RKq07e1mB9ImJNBK1sNX36Qm-gzGzoHsz","appKey":"p9Q0YXonqjlX0h4L2syIP0Tu","placeholder":"ヾﾉ≧∀≦)o快来，快来！","avatar":"mm","meta":["nick","mail","link"],"pageSize":10,"language":null,"visitor":false,"comment_count":true,"recordIP":false,"serverURLs":null,"enableQQ":false,"requiredFields":[]}
    ));
  }, window.Valine);
});
</script>

  <!-- 添加背景特效 -->
  
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
  
  <!-- 添加点击特效 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"rect":"opacity:0.7","log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
